<template>
  <div class="top-warp">
    <div class="top-nav">
      <span class="el-icon-s-operation">数据列表</span>
      <el-button
        class="nav-btn"
        @click="dialogTableVisible = true"
        style="float: right"
        >添加</el-button
      >
      <!-- 添加商品的界面 -->
      <el-dialog title="添加商品" :visible.sync="dialogTableVisible">
        <el-form
          :model="formInline"
          :inline="true"
          ref="formInline"
          :rules="rules"
          status-icon
        >
          <el-form-item label="商品名称:" prop="name">
            <el-input
              v-model="formInline.name"
              placeholder="请输入商品名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品规格:" prop="norms">
            <el-input
              v-model="formInline.norms"
              placeholder="请输入商品规格"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品价格:" prop="costPrice">
            <el-input
              v-model="formInline.costPrice"
              placeholder="请输入商品价格"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelBtn">取 消</el-button>
          <el-button type="primary" @click="queryBtn('formInline')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <!-- 表格列 -->
    <div class="top-tabel">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="编号"> </el-table-column>
        <el-table-column prop="name" label="商品名称"> </el-table-column>
        <el-table-column prop="norms" label="商品规格"> </el-table-column>
        <el-table-column prop="costPrice" label="价格"> </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="delTop(scope.row.id)" type="text">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="top-footer">
      <div class="pag">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="currentCount"
          @current-change="toPage"
          :page-size="size"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/assets/sass/var.scss";

.top-warp {
  .top-nav {
    border: 1px solid rgb(228, 228, 228);
    line-height: 50px;
    padding: 0 20px;
    background-color: $table-barcolor;
    .add-input {
      margin-right: 10px;
    }
    span {
      font-weight: 500;
    }
    .nav-btn {
      margin-top: 4px;
    }
  }
  .top-footer {
    border: 1px solid rgb(228, 228, 228);
    height: 50px;
    box-sizing: border-box;
    width: 100%;
    .pag {
      margin-top: 8px;
      float: right;
    }
  }
  .top-footer ::v-deep .active {
    background-color: $panel-color !important;
  }
}
</style>

<script>
import {
  topApi,
  delTopData,
  pageApi,
} from "@/http/commodity-management/topApi";
import { addGoods } from "@/http/commodity-management/informationApi";
export default {
  name: "TopView",
  data() {
    return {
      rules: {
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        costPrice: [{ required: true, message: "请输入价格", trigger: "blur" }],
        norms: [
          {
            required: true,
            message: "请输入规格，例如：16*4",
            trigger: "blur",
          },
        ],
      },
      tableData: [],
      input: "",
      current: 1,
      currentCount: 1,
      size: 10,
      value: "",
      dialogTableVisible: false,
      formInline: {
        name: "",
        costPrice: "",
      },
    };
  },
  created() {
    this.renderPag();
  },
  methods: {
    delTop(id) {
      console.log("删除id：", id);
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delTopData(id);
          this.renderPag();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    renderPag(page, size) {
      //渲染页面
      topApi()
        .then((res) => {
          this.currentCount = res.data.number;
        })
        .catch((err) => {
          console.log("页面加载失败", err);
        });
      pageApi(page, size)
        .then((res) => {
          // console.log(res);
          this.tableData = res.data.data;
        })
        .catch((err) => {
          console.log("请求失败", err);
        });
    },
    toPage(curr) {
      this.renderPag(curr, this.size);
    },
    queryBtn(formInline) {
      this.$refs[formInline].validate((valid) => {
        if (valid) {
          this.$confirm("是否确认此次操作?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "error",
          })
            .then(() => {
              this.dialogTableVisible = false;
              addGoods(this.formInline);
              this.$message({
                message: "新增成功",
                type: "success",
              });
            })
            .catch((err) => {
              console.log("新增失败", err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    cancelBtn() {
      this.dialogTableVisible = false;
    },
  },
};
</script>

